<style>
.ipad_container{
	padding: 10px;
	margin: 0px;
	width: 900px;
	height: 500px;
	background-color: #cccccc;
	margin:auto;
}

.ipad_block{
	width: 100px;
	height: 100px;
	background-color: #ee7f79;
	float: left;
	margin: 10px;
	cursor: pointer;
}

.ipad_number{
	text-align: center;
	font-size: 40px;
	font-weight: bold;
	margin-top: 20px;
}

.active_decor{
	background-color: #c6d664 !important;
}

</style>

<div class="ipad_container">
	<?php for($i = 1; $i <= $ipadNumber; ++$i): ?>
	<div class="ipad_block">
		<div class="ipad_number"><?php echo $i ?></div>
	</div>
	<?php endfor; ?>
</div>


<script type="text/javascript">

	// ***** blink active ipads ***** //
	var blinkIpads = function(){
		
		$('.ipad_block').each(function(i,e){
			if($(this).hasClass('active')){
				$(this).toggleClass('active_decor');
			}else{
				$(this).removeClass('active_decor');
			}
			
		});
		setTimeout(blinkIpads, 300);
		
	}
	blinkIpads();

	// ***** get active ipads ***** //
	var getActiveIpads = function(){
		$.get('<?php include_component('linker', 'plainActions', array('module'=>'ipad', 'action' => 'activeIpads')) ?>', function(data){

			$('.ipad_block').each(function(i,e){
				$(this).removeClass('active');
			});
				
			if(data.code == '200'){
				$.each(data.ipads, function(i,e){
					$($('.ipad_block')[e.ipad_id-1]).addClass('active');
				});	
			}
			setTimeout(getActiveIpads, 500);
		},'json');
	}
	getActiveIpads();
	
	// ***** deactivate ****** //
	$('.ipad_block').click(function(e){
		e.preventDefault();

		var ipad_id = $('.ipad_block').index($(this)) + 1;
		$.post('<?php include_component('linker', 'plainActions', array('module'=>'ipad', 'action' => 'delete')) ?>',{ipad_id: ipad_id});
		
		return false;
	});



/** reload browser each 30min */
var reloadBrowser = function(){
	window.location.reload();
	setTimeout(reloadBrowser,300000);
}
setTimeout(reloadBrowser,300000);

</script>



